<template>
	<view>
		<view class="header">
			<view class="search">
				<image src="../../static/images/search.png" mode=""></image>
				<input type="text" placeholder="云南/东北/三亚">
			</view>
			<div class="serve">
				<view class="">
					没找到合适的旅行产品？
				</view>
				<div class="dd-serve">
					点击这里 专属旅行顾问来帮您！
				</div>
			</div>
			<div class="banner">
				<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
					<swiper-item>
						<view class="swiper-item">
							<image src="../../static/images/1.jpg" mode=""></image>
						</view>
					</swiper-item>
					<swiper-item>
						<view class="swiper-item">
							<image src="../../static/images/2.jpg" mode=""></image>
						</view>
					</swiper-item>
					<swiper-item>
						<view class="swiper-item">
							<image src="../../static/images/3.jpg" mode=""></image>
						</view>
					</swiper-item>
				</swiper>
			</div>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style lang="less">
	.header {
		width: 100%;
		background-color: red;
		padding: 10rpx 0;

		.search {
			width: 640rpx;
			height: 80rpx;
			padding: 10rpx 20rpx;
			margin: 0rpx auto 10rpx;
			background-color: #fff;
			border-radius: 30rpx;
			display: flex;
			box-sizing: border-box;
			align-items: center;

			image {
				width: 60rpx;
				height: 60rpx;
			}
		}

		.serve {
			width: 640rpx;
			// height: 80rpx;
			margin: 10rpx auto;
			color: #fff;

			.dd-serve {
				width: 640rpx;
				height: 60rpx;
				border-radius: 30rpx;
				background-color: rgb(255, 233, 236);
				color: orangered;
				line-height: 60rpx;
				text-align: center;
				margin-top: 10rpx;
			}
		}

		.banner {
			width: 640rpx;
			height: 328rpx;
			overflow: hidden;
			border-radius: 40rpx;
			margin: 0 auto;



			.swiper-item {
				width: 100%;
				height: 100%;

				image {
					width: 100%;
					height: 100%;
				}
			}



		}
	}
</style>
